<template>
  <div class="inputCom">
    <div class="verifyCodeInput" v-if="loginWay">
      <h1 class="h1Txt">手机验证码登录</h1>
      <h5 class="h5Txt">欢迎使用Daisy商城</h5>
      <div class="phInput inputBorder">
        <i class="yo-ico loginIcon">&#xe607;</i>
        <div class="+86">+86</div>
        <input-box
          ref="phInput"
          type="text"
          :placehodler="'请输入手机号码'"
          :name="'phInput'"
          @inputFocus="inputFocus"
          @setClearSate="setClearSate"
        ></input-box>
        <van-icon
          name="clear"
          size="15px"
          color="#ccc"
          class="hiddenIcon"
          @click="clearHandler('phInput')"
        />
      </div>
      <div class="vcInput inputBorder">
        <i class="yo-ico loginIcon">&#xe65c;</i>
        <input-box
          ref="vcInput"
          type="text"
          :placehodler="'请输入验证码'"
          :name="'vcInput'"
          @inputFocus="inputFocus"
          @setClearSate="setClearSate"
        ></input-box>
        <van-icon
          name="clear"
          size="15px"
          color="#ccc"
          class="hiddenIcon"
          @click="clearHandler('vcInput')"
        />
        <a href="#" class="getCode" @click="getVerifyCode">获取验证码</a>
      </div>
      <h6 class="changeBtn"><i @click="changeSate()">账号密码登录</i></h6>
    </div>
    <div class="passwordInput" v-if="!loginWay">
      <h1 class="h1Txt">账号密码登录</h1>
      <h5 class="h5Txt">欢迎使用Daisy商城</h5>
      <div class="acInput inputBorder">
        <i class="yo-ico loginIcon">&#xe607;</i>
        <input-box
          ref="acInput"
          type="text"
          :placehodler="'请输入手机号码'"
          :name="'acInput'"
          @inputFocus="inputFocus"
          @setClearSate="setClearSate"
        ></input-box>
        <van-icon
          name="clear"
          size="15px"
          color="#ccc"
          class="hiddenIcon"
          @click="clearHandler('acInput')"
        />
      </div>
      <div class="pwInput inputBorder">
        <i class="yo-ico loginIcon">&#xe601;</i>
        <input-box
          ref="pwInput"
          type="password"
          :placehodler="'请输入密码'"
          :name="'pwInput'"
          @inputFocus="inputFocus"
          @setClearSate="setClearSate"
        ></input-box>
        <van-icon
          name="clear"
          size="15px"
          color="#ccc"
          class="hiddenIcon"
          @click="clearHandler('pwInput')"
        />
      </div>
      <h6 class="changeBtn">
        <i @click="changeSate()">免密登录</i> <b>忘记密码?</b>
      </h6>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import inputBox from "./inputBox";
import Util from "@/utils/util.js";
import HttpService from "@/api/api.js";
// import {post} from '../../utils/http.js'
import { Toast } from "vant";
import { Notify } from "vant";

Vue.use(Toast);
Vue.use(Notify);
export default {
  props: {
    loginWay: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    inputBox,
  },
  data() {
    return {
      phoneInputStatus: "blur",
      blurInput: [],
      verifyCode: "",
    };
  },
  create() {},
  mounted() {},
  methods: {
    changeSate() {
      this.$emit("changeLoginWay");
    },
    getElement(parent, className) {
      let element;
      element = parent.querySelector(`.${className}`);
      return element;
    },
    setStyle(element, attr, val) {
      element.style[attr] = val;
    },
    controlClass(type, element, className) {
      if (type == "add") {
        element.classList.add(className);
      } else if (type == "remove") {
        element.classList.remove(className);
      }
    },
    inputFocus(name, isFocus) {
      let blurInput, child;
      blurInput = this.getElement(document, name);
      child = this.getElement(blurInput, "loginIcon");
      if (isFocus) {
        this.setStyle(child, "color", "#666EE8");
        this.setStyle(blurInput, "border", "0.1em solid #666EE8");
      } else {
        this.setStyle(child, "color", "rgba(204, 204, 204, 1)");
        this.setStyle(
          blurInput,
          "border",
          "0.1em solid rgba(204, 204, 204, 1)"
        );
      }
    },
    setClearSate(name, state) {
      let InputContainer, clearIcon, className;
      InputContainer = this.getElement(document, name);
      clearIcon = InputContainer.querySelector(".van-icon");
      if (state) {
        this.controlClass("remove", clearIcon, "showIcon");
        this.controlClass("add", clearIcon, "hiddenIcon");
      } else {
        this.controlClass("remove", clearIcon, "hiddenIcon");
        this.controlClass("add", clearIcon, "showIcon");
      }
    },
    clearHandler(refName) {
      this.$refs[refName].clearValue();
    },
    getVerifyCode() {
      let phoneNumber, phoneReg, result;
      phoneReg =/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
      phoneNumber = this.$refs.phInput.value;
      this.phoneNumber = phoneNumber;
      result = phoneReg.test(phoneNumber);
      if (result) {
        this.sendNoteToUser();
      } else {
        Toast.fail("手机号格式不正确");
      }
      // console.log(phoneNumber)
    },
    async sendNoteToUser() {
      this.verifyCode = Util.getVerifyCode(1000, 9999);
      // console.log(this.verifyCode);
      let data = {
        mobile: this.phoneNumber,
        param: "code:"+this.verifyCode,
        tpl_id: "TP1711063",
      };

      HttpService.loginAPI.sendText(
        data,
        (res) => {
          if(res.status==200){
            Toast.success("验证码发送成功");
          }
        },
        (error) => {
        Toast.fail("验证码发送失败");
          console.log(error)
        }
      );
    },
    getVerifyCodeInputValue(code) {
      this.VerifyPassword(code, this.verifyCode);
    },
    VerifyPassword(inputCode, verifyCode) {
      if (inputCode == verifyCode) {
        Notify({ type: "success", message: "登录成功" });
        //这里做一个假token存在sessionStroage和localStroage中
        let token = Util.newGuid();
        console.log(token);
        Util.setLocalStorage("token", token);
        Util.setSessionStroage("appid", token);
        this.$router.push({ path: "/index/home" });
      } else {
        Notify({ type: "danger", message: "验证码不正确" });
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.showIcon {
  display: block;
}

.hiddenIcon {
  display: none;
}

.inputCom {
  width: 100%;
  height: 18.6em;
  display: flex;
  flex-direction: column;

  .verifyCodeInput, .passwordInput {
    height: 100%;

    .h1Txt {
      font-size: 2.4em;
      color: #000;
      font-weight: 400;
      text-align: center;
    }

    .h5Txt {
      font-size: 1.2em;
      color: #999;
      font-weight: 400;
      text-align: center;
    }

    .phInput, .vcInput, .acInput, .pwInput {
      margin: 1em 0;
      width: 100%;
      height: 3.4em;
      border-radius: 5em;
      border: 0.1em solid rgba(204, 204, 204, 1);
      background: #fff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 14px;

      .loginIcon {
        color: #ccc;
        // height: 1.6em;
        // width: 1.6em;
        font-size: 1.6em;
      }

      input {
        border: none;
        width: 12.4em;
        height: 2.5em;
      }

      .getCode {
        color: #666EE8;
      }
    }

    .changeBtn {
      font-size: 14px;
      height: 2.8em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 400;

      i {
        color: #666ee8;
        cursor: pointer;
      }

      b {
        color: #999;
        cursor: pointer;
      }
    }
  }
}
</style>

<style lang="stylus"></style>